<template>
  <div class="flow">
    <div class="formLook">
      <div class="applicant-details">
        <LeftPanel :applicationForm="applicationForm" @cancel="$GoBack()" />
        <RightPanel
          :applicationForm="applicationForm"
          :userInfoRules="userInfoRules"
          :hrNameOptions="hrNameOptions"
          :sys_contact_information="sys_contact_information"
          :sys_follow_up="sys_follow_up"
          :requireProposerOptions="requireProposerOptions"
          :sys_interview_method="sys_interview_method"
          :sys_interview_type="sys_interview_type"
          @cancel="$GoBack()"
          @submit="handleSubmit"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  jobApplicationInfo,
  submitJob,
} from "@/api/recruitment/jobApplication/index.js";
import { seachPersonList } from "@/api/recruitment/needWorkers/index.js";
import { formatDate } from "@/utils/index.js";

import LeftPanel from "../components/LeftPanel.vue";
import RightPanel from "../components/RightPanel.vue";
const route = useRoute();

const router = useRouter();
const query = computed(() => {
  let id = route.query ? Number(route.query.id) : "";
  return { id };
});
const { proxy } = getCurrentInstance();
const {
  sys_contact_information,
  sys_follow_up,
  sys_interview_method,
  sys_interview_type,
} = proxy.useDict(
  "sys_contact_information",
  "sys_follow_up",
  "sys_interview_method",
  "sys_interview_type"
);

const hrNameOptions = reactive([]);
const requireProposerOptions = reactive([]);

const applicationForm = reactive({
  name: "",
  sex: "0",
  phoneNumber: "",
  mail: "",
  // 身份证号
  idNumber: "",
  // 出生日期
  birthTime: "",
  age: "",
  // 专业
  profession: "",
  // 学历
  educationalBackground: "",
  // 毕业院校
  graduateSchool: "",
  // 备注
  remarks: "",
  // 简历附件
  resumeFile: "",
  // 个人照片
  personPhoto: "",

  id: "",

  hrId: "",

  contactTime: "",

  contactInformation: "",

  followUp: "",

  content: "",

  appointmentTime: "",

  interviewerId: "",

  interviewMethod: "",

  interviewType: "",

  address: "",
});
const userInfoRules = reactive({
  hrId: [{ required: true, message: "请选择HR", trigger: "blur" }],
  appointmentTime: [
    { required: true, message: "请选择预约面试时间", trigger: "blur" },
  ],
  interviewerId: [{ required: true, message: "请选择面试官", trigger: "blur" }],
  interviewMethod: [
    { required: true, message: "请选择面试方式", trigger: "blur" },
  ],
  interviewType: [
    { required: true, message: "请选择面试类型", trigger: "change" },
  ],
});
const params = reactive({
  id: "",

  hrId: "",

  contactTime: "",

  contactInformation: "",

  followUp: "",

  content: "",

  appointmentTime: "",

  interviewerId: "",

  interviewMethod: "",

  interviewType: "",

  address: "",
});
onMounted(() => {
  searchBMLD();

  if (route.query.id) {
    getJobInfo(route.query.id);
  }
});
const getJobInfo = (id) => {
  jobApplicationInfo(Number(id)).then((res) => {
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        if (res.data[item]) {
          applicationForm[item] = res.data[item];
          applicationForm.workExperience = res.data.workExperience;

          // res.data.workExperience.forEach((workItem) => {
          //   workItem.mainWorkContent = workItem.mainWorkContent.split("\n");
          // });
          res.data.workExperience.forEach((workItem) => {
            if (
              workItem.mainWorkContent !== null &&
              typeof workItem.mainWorkContent === "string"
            ) {
              workItem.mainWorkContent = workItem.mainWorkContent.split("\n");
            }
          });
        }
      });
    }
  });
};
// HR
const hrNameChange = (val) => {
  hrNameOptions.forEach((item) => {
    if (val == item.value) {
      applicationForm.hrName = item.label;
    }
  });
};
const searchBMLD = async () => {
  // HR
  const res1 = await seachPersonList({
    roleKey: "HR",
  });
  if (res1.rows.length > 0) {
    res1.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      hrNameOptions.push({
        label,
        value,
      });
    });
  }
  // BMLD
  const res2 = await seachPersonList({
    roleKey: "",
  });
  if (res2.rows.length > 0) {
    res2.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      requireProposerOptions.push({
        label,
        value,
      });
    });
  }
};

const handleSubmit = (data) => {
  ElMessageBox.confirm(`是否要提交这条面试录用流程?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    applicationForm.appointmentTime = formatDate(
      applicationForm.appointmentTime
    ).dates;
    applicationForm.contactTime = formatDate(applicationForm.contactTime).dates;

    console.log(applicationForm, "applicationForm");
    Object.keys(applicationForm).forEach((item) => {
      if (params[item] == "") {
        params[item] = applicationForm[item];
      }
    });
    console.log(params, "params");
    const res = await submitJob(params);
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: `提交成功`,
      });
      router.push({ path: "/recruitment/jobApplication" });
      proxy.$refs["ruleFormRefOne"].resetFields();
      proxy.$refs["ruleFormRefTwo"].resetFields();
    }
  });
};
</script>

<style scoped>
.applicant-details {
  display: flex;
  height: 100%;
  background: #f1f2f4;
}

/* 左侧面板样式 */
:deep(.left-panel) {
  /* width: 70%; */
  background: #fff;
  isolation: isolate;
  border-radius: 10px;
}

/* 右侧面板样式 */
:deep(.right-panel) {
  width: calc(100vw - 70vw);
  margin-left: 10px;
  background: #fff;
  isolation: isolate;
  border-radius: 10px;
}

:deep(.right-panel) {
  /* 移动端默认样式 */
  width: 100%;
  margin-left: 0;
  background: #fff;
  isolation: isolate;
  border-radius: 10px;
  transition: width 0.3s ease; /* 添加过渡动画 */
  /* 小屏设备 (576px-768px) */
  @media (min-width: 576px) {
    width: 50%;
    margin-left: 10px;
  }
  /* 中等屏幕 (768px-992px) */
  @media (min-width: 768px) {
    width: 40%;
  }
  /* 超大屏幕 (>1200px) */
  @media (min-width: 1200px) {
    width: 30vw;
  }
}
</style>
